<template>
  <div>
    <div>
      <el-alert
        style="background-color: #409EFF; color: #222222; font-style: unset; margin-top: 10px; margin-bottom: 20px"
        :closable="false" title="修改密码"
      />
    </div>
    <div style="margin: 120px;"></div>

    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" style="width: 350px"></el-input>
      </el-form-item>

      <!--   按钮   -->
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
export default {
  name: 'updatePassword',

  data() {

    /*校验两次输入密码是否相同*/
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    //响应的数据
    return {
      ruleForm: {
        pass: '',
        checkPass: ''
      },
      editForm: {
        newPassword:''
      },

      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' },
          { min: 6, max: 16, message: '请输入6-16位范围内的密码', trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' },
          { min: 6, max: 16, message: '请输入6-16位范围内的密码', trigger: 'blur' }
        ]
      }
    }
  },
  //自动加载
  mounted() {
    this.loadUser()     //加载当前登录的用户信息
  },

  //我的前端方法们
  methods: {
    submitForm(form) {
      this.$refs[form].validate(
        (valid) => {
          if (valid) {
            //console.log("ruleForm.checkPass="+this.ruleForm.checkPass)
            this.axios.post('/user/updatePassword', this.ruleForm).then(
              (resp) => {
                if (resp.code === 200) {
                  this.$message({
                    message: '操作成功',
                    type: 'success',
                    onClose: () => { //关闭回调
                    }
                  })
                  //获取当前登录的信息
                  //修改密码信息
                  //console.log("this.ruleForm.checkPass"+this.ruleForm.checkPass)
                  //this.editForm.newPassword = this.ruleForm.checkPass
                  this.loadUser();
                  if (resp.code==200){
                    this.$message({
                      message:"密码修改成功，请重新登录。",
                      type:'success',
                      onClose:()=>{}
                    })
                  }

                }
              }
            ).catch(
              (resp) => {
                this.$confirm('网络异常！')
              }
            ).then(()=>{
              this.axios.post('/logout')
              this.$router.replace('/')
            })
            //alert('提交成功')
          } else {
            console.log('error submit!!')
            return false
          }
        })
    },

    //获取当前登录的用户信息
    loadUser() {
      this.axios.get('/user/info').then(
        (resp) => {
          this.ruleForm = resp.data
          //alert("resp.data.realName"+resp.data.password)
        }
      ).catch(
        (resp) => {
          this.$confirm('网络异常！')
        }
      )
    },

    /*重置内容*/
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
